<template>
  <div class="allgg">
    <div class="top">
      <h1>公告管理</h1>
      <el-form class="formAll" label-width="100px">
        <el-form-item>
          名字：
          <el-input
            v-model="input"
            class="inputObj"
            placeholder="请输入"
            style="width: 300px; height: 40px"
            type="text"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 公告 -->
    <section>
      <div class="ggpro">
        <div class="ggleft">公告</div>
        <div class="ggright">
          <el-row>
            <!-- 新建 -->
            <el-button
              style="margin-right: 16px; width: 80px"
              type="primary"
              @click=";(dialogFormVisible = true), (isShow = true)"
            >
              + 新建
            </el-button>

            <el-dialog
              v-model="dialogFormVisible"
              style="height: 1000px; width: 80%"
              title="公告编辑"
            >
              <el-form :model="form" style="width: 100%">
                <!-- 标题 -->
                <el-form-item label="标题">
                  <el-input
                    v-model="form.name"
                    autocomplete="off"
                    placeholder="请输入公告标题"
                  />
                </el-form-item>

                <!-- 简介 -->
                <el-form-item label="简介">
                  <el-input
                    v-model="form.desc"
                    placeholder="请输入公告简介"
                    type="textarea"
                  />
                </el-form-item>
                <!-- 图片 -->
                <el-form-item label="图片">
                  <div class="newimg">
                    <label class="addimg">
                      <el-upload
                        accept="image/*"
                        :action="baseURL + '/api/v1/common/upload_file'"
                        drag
                        name="file"
                        :on-success="success"
                        :show-file-list="false"
                      />
                      <vab-icon
                        v-show="imgUrl == ''"
                        icon="add-fill"
                        style="font-size: 80px; color: rgb(197, 197, 197)"
                      />
                      <img
                        v-show="imgUrl"
                        alt=""
                        :src="baseURL + imgUrl"
                        style="display: block"
                      />
                    </label>
                  </div>
                </el-form-item>
                <!-- 老王编辑器 -->
                <el-form-item label="详情">
                  <hr />
                  <div style="border: 1px solid #ccc">
                    <Toolbar
                      :default-config="toolbarConfig"
                      :editor="editorRef"
                      style="border-bottom: 1px solid #ccc"
                    />
                    <!--    v-model="valueHtml" -->
                    <Editor
                      v-model="form.content"
                      :default-config="editorConfig"
                      style="height: 390px; overflow-y: hidden"
                      @onCreated="handleCreated"
                    />
                  </div>

                  <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">
                      取消
                    </el-button>
                    <el-button
                      v-show="isShow"
                      type="primary"
                      @click="NewNoticeFn(), (dialogFormVisible = false)"
                    >
                      确认
                    </el-button>
                    <el-button
                      v-show="isShow == false"
                      type="primary"
                      @click="reviseFn(), (dialogFormVisible = false)"
                    >
                      确认
                    </el-button>
                  </span>
                </el-form-item>
              </el-form>
            </el-dialog>
            <!--刷新  -->
            <el-tooltip content="刷新" effect="dark" placement="top-start">
              <el-button icon="RefreshRight" @click="Refresh" />
            </el-tooltip>
            <!-- 密度 -->
            <el-tooltip
              content="密度"
              effect="dark"
              placement="top-start"
              trigger="hover"
            >
              <el-popover trigger="click" :visible="visible" :width="170">
                <div>
                  <el-radio-group
                    v-model="tabeSize"
                    style="
                      width: 160;
                      display: flex;
                      height: 110px;
                      flex-direction: column;
                      justify-content: space-around;
                      align-items: center;
                    "
                  >
                    <el-radio-button label="large" @click="visible = false">
                      默认
                    </el-radio-button>
                    <el-radio-button label="default" @click="visible = false">
                      中等
                    </el-radio-button>
                    <el-radio-button label="small" @click="visible = false">
                      紧凑
                    </el-radio-button>
                  </el-radio-group>
                </div>
                <template #reference>
                  <el-button icon="Expand" @click="visible = true" />
                </template>
              </el-popover>
            </el-tooltip>

            <el-tooltip content="列设置" effect="dark" placement="top-start">
              <el-button icon="Tools" />
            </el-tooltip>
          </el-row>
        </div>
      </div>

      <!-- table -->
      <div class="protable">
        <el-table
          class="tableObj"
          :data="tableData"
          :size="tabeSize"
          style="width: 100%"
        >
          <el-table-column
            class="tableCol"
            index="indexMethod"
            label="序号"
            type="index"
          />
          <el-table-column class="tableCol" label="名字" prop="name" />
          <el-table-column class="tableCol" label="主图" prop="coverImage">
            <template #default="{ row }">
              <img :src="'http://localhost:1337' + row.coverImage" />
            </template>
          </el-table-column>
          <el-table-column class="tableCol" label="简介" prop="desc" />
          <el-table-column header-align="center" label="操作" max-width="130">
            <template #default="scope">
              <!-- @click="handleClick()" -->
              <el-button
                size="small"
                type="primary"
                @click="handleClick(scope.row), (isShow = false)"
              >
                修改
              </el-button>
              <!-- 删除 -->
              <el-popconfirm
                cancel-button-text="取消"
                confirm-button-text="确认"
                title="是否确认删除"
                @cancel="cancelEvent"
                @confirm="handelDelete"
              >
                <template #reference>
                  <el-button size="small" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- page -->
      <div class="pageNumber">
        <el-pagination
          background
          :current-page="page"
          layout="prev, pager, next"
          :page-count="pageNumber"
          :total="pageNumber"
          @click="NoticeListPagefn()"
          @current-change="pageChange"
        />
      </div>
    </section>
  </div>
</template>

<script setup>
  import {
    NewNotice,
    NoticeList,
    NoticeDelete,
    NoticeListName,
    NoticeListPage,
    NoticeUpdata,
    NoticeInfo,
  } from '@/myApi/index'
  import { baseURL } from '@/myApi/request'

  import { onMounted, reactive, shallowRef, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  // 引入组件
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  const router = useRouter()

  // 控制确认按钮
  const isShow = ref(true)

  const dialogFormVisible = ref(false)
  const formLabelWidth = '140px'

  const form = reactive({
    name: '',
    desc: '',
    coverImage: '',
    content: '',
  })

  const NewNoticeFn = async () => {
    const res = await NewNotice({ ...form })
    console.log(res)
    dialogFormVisible.value = false
    NoticeListFn()
  }

  //图片上传
  const imgUrl = ref('')
  const success = (res) => {
    console.log(res)
    imgUrl.value = res.data
    form.coverImage = res.data
  }

  //老王编辑器
  // let valueHtml = ref('') //编辑器内容
  const editorRef = shallowRef(null) //存储编辑器实例
  // 编辑器实例构建完毕
  const handleCreated = (editor) => {
    editorRef.value = editor
  }
  // 菜单配置
  const toolbarConfig = {}
  // 编辑器配置
  const editorConfig = {
    MENU_CONF: {
      uploadImage: {
        // base64LimitSize: 5 * 1024 * 10000, // 5kb 转base64的限制
        server: 'http://jx.xuzhixiang.top/upload_file_qn.php', //接口地址
        fieldName: 'file', //存文件的参数名
        // 自定义插入
        customInsert(res, insertFn) {
          console.log(res)
          // 从 res 中找到 url alt href ，然后插入图片
          insertFn(res.file_url)
        },
      },
    },
  }

  //模糊查询
  const input = ref(null)
  const submitForm = async () => {
    const word = input.value
    // console.log(word)
    const r = await NoticeListName(word) // console.log(r.data.data)
    tableData.value = r.data.data
  }
  const resetForm = () => {
    input.value = ''
  }

  // table的数据
  const tableData = ref([])
  //自定义索引
  const indexMethod = () => {
    return index
  }
  //公告列表
  const NoticeListFn = async () => {
    const { data } = await NoticeList()
    console.log(data.data)
    tableData.value = data.data
    pageNumber.value = data.pages
  }
  console.log(tableData)

  //删除公告
  const handelDelete = async (id) => {
    try {
      await NoticeDelete(id)
      tableData.value = tableData.value.filter((item) => {
        item.id !== id
        console.log('删除成功')
      })
      NoticeListFn()
    } catch (error) {
      console.log(error)
    }
  }
  const cancelEvent = () => {
    console.log('取消!')
  }

  //修改公告
  const handleClick = async (row) => {
    const data = await NoticeInfo(row.id)
    console.log(data.data)
    dialogFormVisible.value = true
    console.log(row)
    form.name = data.data.name
    form.desc = data.data.desc
    form.content = data.data.content
    form.coverImage = data.data.coverImage
  }
  const reviseFn = async (id) => {
    console.log(111)
    const data = await NoticeUpdata(id, form)
  }

  //点击按钮 进行刷新
  const Refresh = () => {
    // router.go(0)
    location.reload()
  }

  //表格密度的
  //large / default /small
  const tabeSize = ref('small')
  const visible = ref(false)

  //page
  const page = ref(1)
  const pageNumber = ref(2)
  const pageChange = async (pageNum) => {
    page.value = pageNum
    console.log(page.value)
    const { data } = await NoticeListPage(page.value)
    pageNumber.value = data.pages
    console.log(data)
    tableData.value = data.data
  }

  //初始化调用
  onMounted(() => {
    NoticeListFn()
  })
</script>

<style scoped>
  .allgg {
    background-color: #f7f8fa;
  }
  .top {
    width: 100%;
    height: 160px;
    background-color: #fff;
    padding-top: 10px;
  }
  .top h1 {
    margin-left: 20px;
  }
  .formAll {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-right: 20px;
  }
  section {
    width: 100%;
    height: 1100px;
    margin-top: 30px;
    background-color: #fff;
    padding: 20px;
  }
  .ggpro {
    widows: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .ggright {
    position: relative;
  }
  .protable {
    width: 100%;
  }

  .protable img {
    width: 80px;
  }
  .tableObj {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
  }
  .pageNumber {
    width: 100%;
    background-color: #fff;
    height: 100px;
  }

  .newimg .addimg {
    display: block;
    width: 150px;
    height: 150px;
    border: 1px dashed rgb(197, 197, 197);
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .newimg img {
    width: 150px;
  }
  .newimg > .addimg:hover {
    border-color: #1890ff;
    box-sizing: border-box;
  }
  .dialog-footer {
    float: right;
    padding-top: 20px;
    margin-left: 80%;
  }
</style>
